<template>
	<div>
		<div v-if="!notSearch">
			<search
				:fields="fields"
				ref="searchCom"
				@searchList="searchList"
				@resetList="resetList"
			>
				<template #individuation>
					<slot name="individuation"></slot>
				</template>
        <template #btn-add>
          <slot name="btn-add"></slot>
        </template>
        <template #right-btn>
          <slot name="right-btn"></slot>
        </template>
			</search>
		</div>
		<div>
			<slot name="btns"></slot>
		</div>
		<div>
			<tableCom
				ref="tablecom"
				:tableHead="tableHead"
				:tableData="tableData"
				@selectChange="selectChange"
				:isRadio="isRadio"
				:height="height"
				:is-index="isIndex"
				:isSelection="props.isSelection"
				@rowClick="rowClick"
				v-bind="$attrs"
			>
				<template #operate>
					<slot name="operate"></slot>
				</template>
				<template v-for="item in state?.slotList" :key="item" #[item]="{ row }">
					<slot :name="item" :row="row"></slot>
				</template>
			</tableCom>
		</div>
		<!-- 分页   -->
		<div class="pagination-warp">
			<Pagination
				class="pagination"
				v-show="isPaging"
				:small="true"
				:total="page.total"
				v-model:page="page.current"
				v-model:limit="page.size"
				:pageSizes="[20, 30, 40, 50, 100, 150, 200]"
				@pagination="pageChange"
			/>
		</div>
	</div>
</template>
<script setup>
import { onMounted, ref, reactive } from "vue";
import Pagination from "../Pagination.vue";
import Search from "./search.vue";
import TableCom from "./table.vue";
import { ElButton, ElTableColumn } from "element-plus";

const state = reactive({
	slotList: [],
});
const props = defineProps({
	//是否需要查询
	notSearch: {
		default: false,
	},
	// 表格高度
	height: {
		default: "31.25rem",
	},
	//是否隐藏
	isPaging: {
		default: true,
		type: Boolean,
	},
	//搜索框的
	fields: {
		type: Array,
		default: () => [{ key: "name", label: "风险类型", type: "input" }],
	},

	page: {
		// 分页
		type: Object,
		default: () => {
			return {
				total: 0,
				current: 1,
				page: 50,
			};
		},
	},
	//是否需要序号
	isIndex: {
		default: true,
		type: Boolean,
	},
	//是否多选变单选
	isRadio: {
		default: true,
		type: Boolean,
	},
	//是否需要多选
	isSelection: {
		default: true,
		type: Boolean,
	},
	tableHead: {
		type: Array,
		default: () => [],
	},
	tableData: {
		type: Array,
		default: () => [],
	},
});
const emits = defineEmits([
	"selectChange",
	"page-change",
	"searchList",
	"rowClick",
	"resetList",
]);

const pageChange = (e) => {
	emits("page-change", e);
};
const rowClick=(e)=>{
	emits("rowClick", e);
}
const selectChange = (result) => {
	if (result) {
		emits("selectChange", result);
	}
};
//查询对象
const searchList = (result) => {
	if (!result) return;
	emits("searchList", result);
};
//重置
const resetList = () => {
	emits("resetList");
};
//获取搜索组件数据
const searchCom = ref(null);
//获取搜索组件数据
const getSearchData = () => {
	return searchCom.value.getSearchParams();
};
const tablecom = ref(null);
//全选表格
const checkAll = (e) => {
	tablecom.value.checkAll(e);
};
//循环加入插槽

onMounted(() => {
	props.tableHead.forEach((item) => {
		if (item.slot) {
			state.slotList.push(item.slot);
		}
	});
});
defineExpose({
	getSearchData,
	checkAll,
});
</script>
<style lang="scss" scoped>
.pagination-warp {
	margin-top: 20px;
}
</style>
